<script setup >
import { onMounted, ref } from 'vue';
/* 
  获取模板元素
  1. 创建 空 h1Ref
  2. h1Ref 和 dom 元素绑定，等 dom 渲染完成(onMounted)，就会存放到h1Ref
  3. 可以通过 h1Ref 获取到 dom 并修改内容
*/
const h1Ref = ref(null)
console.log('h1Ref.value -----> ', h1Ref.value);

onMounted(() => {
  console.log('onMounted -----> ', h1Ref.value);
})

const change = () => {
  h1Ref.value.innerHTML = '天生我材必有用'
}

</script>

<template>
  <h1 ref="h1Ref">我是vue3</h1>
  <button @click="change">点我改名</button>
</template>

